<template>
	<view>
		<view class="fixed">
			<u-search placeholder="报修编号/设备编号/设备名称/型号" v-model="keyword" :showAction="false"></u-search>
		</view>
		<view class="screen">
			<view class="state location" @click="open">
				<span>设备状态</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
			<view class="extent location">
				<span>设备类型</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
			<view class="place location" @click="location">
				<span>所在位置</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
		</view>
		<view class="state-box">
			<view class="bottom">
				<view class="headline">
					ML202306120003-压缩机
				</view>
				<view class="information">
					设备型号：MK5698
				</view>
				<view class="information">
					所在位置：这是一个地址
				</view>
				<view class="state-show">
					<text>待验证</text>
				</view>
			</view>
		</view>

		<!-- --------------------- -->
		<!-- 弹出层 -->
		<u-popup :show="show" mode="center" @close="close">
			<template>
				<view class="popup-header">
					设备状态
				</view>
				<view class=""
					style="display: flex; justify-content: space-between;margin: 60rpx 32rpx 0 32rpx;flex-wrap: wrap;">
					<view class="u-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
						<u-tag :text="item.text" :plain="!item.checked" type="warning" :name="index"
							@click="checkboxClick">
						</u-tag>
					</view>
				</view>

				<!-- 确定按钮 -->
				<view class="button">
					确定
				</view>
			</template>
		</u-popup>
		<!-- ---------------------------- -->
		<!-- 所在位置 -->
		<u-popup :show="show1" mode="center" @close="close" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					所在位置
				</view>
				<view class="search">
					<u-search placeholder="位置名称" v-model="keyword"></u-search>
				</view>
				<view class="container">
					<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange"
						shape="circle" iconPlacement="right" activeColor="#38AFFF">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button">
					确定
				</view>
			</template>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 位置得数据
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '西区铸模车间A-001',
						disabled: false
					},
					{
						name: '西区铸模车间A-002',
						disabled: false
					},
					{
						name: '西区铸模车间A-003',
						disabled: false
					},
					{
						name: '西区铸模车间A-004',
						disabled: false
					},
					{
						name: '西区铸模车间A-005',
						disabled: false
					},
					{
						name: '西区铸模车间A-006',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					}
				],
				reception: false, //接收
				show1: false, //所在位置弹出层
				show: false, //弹出层
				keyword: '',
				checkboxs: [{
						checked: false,
						text: '待接收'
					},
					{
						checked: false,
						text: '待维修'
					},
					{
						checked: false,
						text: '待验证'
					}, {
						checked: false,
						text: '已完成'
					}
				]
			}
		},
		onLoad(options) {
			console.log(options.state);
		},
		methods: {
			// 关闭弹出层
			close() {
				this.show = false
				this.show1 = false
				this.reception = false
			},
			// 打开弹出层
			open() {
				this.show = true
			},
			// 弹出层标签点击事件
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			},
			// 所在位置弹出层
			location() {
				this.show1 = true
			},
			// 多选按钮
			checkboxChange(n) {
				console.log('change', n);
			}
		},

		onNavigationBarButtonTap(event) {
			uni.navigateTo({
				url:'/pages/inventory/add/index'
			})
		},
	}
</script>

<style lang="scss">
	::v-deep .weizi {
		.u-popup__content {
			height: 1048rpx !important;
		}

		.u-checkbox {
			margin-bottom: 48rpx !important;
		}
	}

	::v-deep .u-popup__content {}

	.container {
		height: 660rpx;
		/* 设置容器的固定高度 */
		overflow: auto;
		/* 添加滚动条 */
	}

	// 多选框得边框颜色
	::v-deep .u-checkbox__icon-wrap--circle {
		border-color: rgba(56, 175, 255, 1) !important;
	}

	::v-deep .u-checkbox-group--column {
		padding: 0 32rpx;
	}

	.search {
		padding: 0 32rpx 12rpx 32rpx;
		box-shadow: 0px 2rpx 4rpx rgba(32, 37, 64, 0.06);
		margin-bottom: 48rpx;
	}

	.button {
		margin: 50rpx auto;
		width: 490rpx;
		height: 64rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
		font-size: 32Rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 64rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.popup-header {
		margin: 0 32rpx 24rpx 32rpx;
		border-bottom: 0.5px solid #f2f2f4;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(32, 37, 64, 1);

	}

	// 俩按钮对齐
	.yangs {
		width: 292rpx;
		height: 64rpx;
		opacity: 1;
		border-radius: 60rpx;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 64rpx;
		text-align: center;
	}

	.button-left {
		border: 1px solid #38AFFF;
		color: #202540;
	}

	.button-right {
		background: linear-gradient(90deg, #38DEFF 0%, #38AFFF 100%);
		color: #FFFFFF;
	}

	// -------------------------------
	// 弹出层样式
	.u-page__tag-item {
		display: flex;
	}

	.u-transition {
		// padding: 24rpx !important;
	}

	::v-deep .u-page__tag-item {
		width: 160rpx !important;
		display: inline-block !important;

		uni-view {
			justify-content: center !important;
		}
	}

	::v-deep .u-tag--warning--plain {
		// border-radius: 12rpx;
		width: 160rpx !important;
		border: 0rpx solid #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag--warning {
		// opacity: 0.1;
		background-color: #fff !important;
		border-width: 1px !important;
		border-color: #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag__text--warning {
		color: #38d6ff !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag--square {
		width: 160rpx !important;
		border-radius: 6px !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag__text--warning--plain {
		color: #202540 !important;
		font-size: 32rpx !important;
		margin: 0 auto !important;

	}

	// --------------------------------------------
	.fixed {
		width: 100%;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 2px rgba(32, 37, 64, 0.06);
		padding: 12rpx 32rpx;
		position: fixed !important;
	}

	.screen {
		padding-top: 140rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-around;

		.location {
			display: flex;
		}

		.u-icon {
			margin-left: 10rpx;
			padding-top: 4rpx;
		}

	}

	.state-box {
		margin: 0 32rpx 48rpx 32rpx;
		padding: 48rpx 32rpx 32rpx 32rpx;
		// height: 450rpx;

		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

		.bottom {
			margin-bottom: 32rpx;

			view {
				margin-bottom: 32rpx;
			}
		}

		.information {
			opacity: 0.3;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
		}

		.headline {
			height: 38rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 38rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
			vertical-align: top;

		}

		.state-show {
			display: flex;

			text {
				text-align: center;
				line-height: 36rpx;
				width: 112rpx;
				height: 36rpx;
				opacity: 1;
				border-radius: 8rpx;
				background: linear-gradient(90deg, rgba(121, 242, 170, 0.1) 0%, rgba(64, 219, 126, 0.1) 100%);
				color: rgba(75, 235, 139, 1);
				font-size: 20rpx;
			}
		}


		.verification {
			width: 622rpx;

		}



		.dispatch {
			width: 202rpx;
			border: 1px solid #38bdff;
			color: rgba(32, 37, 64, 1);
		}
	}












</style>
